<template>
  <el-dialog v-model="dialogVisible" @close="handleDialogClose()" title="新建表单" width="98%" top="10px">
    <v-form-designer ref="vfDesigner" :designer-config="designerConfig">
      <!-- 自定义按钮插槽演示 -->
      <template #customToolButtons>
        <el-button type="primary" @click="saveFormJson">在线保存</el-button>
      </template>
    </v-form-designer>
    <template #footer>
      <!-- <el-button type="primary" @click="submitForm()"> 提交 </el-button> -->
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, defineExpose, onMounted } from "vue";
import axios from "axios";
import { ElMessage } from "element-plus";
import { fetchTemplateData } from "@/api/get-data.js";
import pinia from "@/store/pinia";
import { useMapStore } from "@/store/map";
const mapStore = useMapStore(pinia);

let dialogVisible = ref(false);
const vfDesigner = ref(null);

const designerConfig = reactive({
  languageMenu: true,
  exportCodeButton: true,
  generateSFCButton: false,
  //externalLink: false,
  //formTemplates: false,
  //eventCollapse: false,
  //clearDesignerButton: false,
  //previewFormButton: false,

  //presetCssCode: '.abc { font-size: 16px; }',
});

onMounted(() => {
  const json = {
    widgetList: [
      {
        key: 79888,
        type: "input",
        icon: "text-field",
        formItemFlag: true,
        options: {
          name: "input25936",
          label: "UserName",
          labelAlign: "",
          type: "text",
          defaultValue: "",
          placeholder: "",
          columnWidth: "200px",
          size: "",
          labelWidth: null,
          labelHidden: false,
          readonly: false,
          disabled: false,
          hidden: false,
          clearable: true,
          showPassword: false,
          required: false,
          requiredHint: "",
          validation: "",
          validationHint: "",
          customClass: "",
          labelIconClass: null,
          labelIconPosition: "rear",
          labelTooltip: null,
          minLength: null,
          maxLength: null,
          showWordLimit: false,
          prefixIcon: "",
          suffixIcon: "",
          appendButton: false,
          appendButtonDisabled: false,
          buttonIcon: "custom-search",
          onCreated: "",
          onMounted: "",
          onInput: "",
          onChange: "",
          onFocus: "",
          onBlur: "",
          onValidate: "",
          onAppendButtonClick: "",
        },
        id: "input25936",
      },
    ],
    formConfig: {
      modelName: "formData",
      refName: "vForm",
      rulesName: "rules",
      labelWidth: 80,
      labelPosition: "left",
      size: "",
      labelAlign: "label-left-align",
      cssCode: "",
      customClass: [],
      functions: "",
      layoutType: "PC",
      jsonVersion: 3,
      onFormCreated: "",
      onFormMounted: "",
      onFormDataChange: "",
      customFormName: "自定义表单名",
    },
  };
  try {
    vfDesigner.value.setFormJson(json);
  } catch (error) {
    console.log(error);
  }

});

const handleDialogClose = () => {
  dialogVisible.value = false;
};

const submitForm = () => {
  dialogVisible.value = false;
  fetchTemplateData(
    mapStore.templateTableCurrentPage,
    mapStore.templateTablePageSize
  );
};

const saveFormJson = () => {
  let formJson = vfDesigner.value.getFormJson()
  //TODO: 将formJson提交给后端保存接口，需自行实现！！
  ElMessage.success('表单已保存！')
}

defineExpose({
  dialogVisible,
});
</script>
<style scoped></style>
